<!DOCTYPE html>
<html>
	<head>
		<title>Smart Album Canvas test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="canvas.css" />
		<script type="text/javascript" src="fabric.js"></script>
		<script type="text/javascript" src="/Raphael/raphael-min.js"></script>
		<script type="text/javascript" src="ebook_editor.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">			
			
			var canvases = {};
			var workspace;
			var editor;


			document.addEventListener('DOMContentLoaded', function(e)
			{
				workspace = document.getElementById('workspace');
				editor = new EbookEditor({
					container: workspace
				});
				
				$.ajax({
					url: 'layout.php',
					type: 'get',
					dataType: 'json',
					success: function(data, status)
					{
						//var objCanvas = editor.createPage(data[0]);
						
						for ( var num in data )
						{
							// Create canvas and add object reference to collection
							var objCanvas = editor.createPage(data[num[0]]);

							//var fCanvas = fabric.Canvas(page.index);						
						}
							/*
							 **/
						console.log(data);
						/*
						for (var i in images)
						{
							var imageObj = images[i];
							var fImageObj;
							fabric.Image.fromURL(imageObj.url, function(img)
							{
								// Set the image scale size
								img.scaleToHeight(imageObj.height);					
								// Now set the image location properties
								img.set({
									left: colCurrent, 
									top: rowCurrent, 
									angle: 0
								});
								// Check the current column position
								colCurrent = Math.ceil(colCurrent + (img.getWidth() + margin));
								// If we're outside the column max, start a new row
								if ( colCurrent > colMax )
								{
									colCurrent = 90;
									rowCurrent = Math.ceil(rowCurrent + (img.getHeight() + margin));
									// reset the image location properties
									img.set({
										left: colCurrent, 
										top: rowCurrent, 
										angle: 0
									});
									// Check the current column position
									colCurrent = Math.ceil(colCurrent + (img.getWidth() + margin));
								}
								canvas.add(img);				
							});
						}
						canvas.renderAll();
						*/
					}
				});
				
			}, true);

		</script>
	</head>
	<body>
		<div id="container">
			<div id="workspace">
				
			</div>
			<div id="filmstrip"></div>
		</div>
	</body>
</html>
